<template lang="pug">
  el-dialog(:title='textMap[dialogStatus]' :visible.sync='showDlg')
    el-form(ref='dataForm' :rules='rules' :model='newCase' label-position='left' label-width='100px' style='width: 500px; margin-left:50px;')
      el-form-item(:label="$t('casesTable.caseName')" prop='caseName')
        el-input(v-model='newCase.caseName')
      el-form-item(:label="$t('casesTable.caseNo')" prop='caseNo')
        el-input(v-model='newCase.caseNo')
      el-form-item(:label="$t('casesTable.caseType')" prop='caseType')
        el-select.filter-item(v-model='newCase.caseType' placeholder='请选择一个案件类型')
          el-option(v-for='item in caseTypeOptions' :key='item.key' :label='item.display_name' :value='item.key')
      el-form-item(:label="$t('casesTable.createDate')" prop='createTime')
        el-input(v-model='newCase.createTime' :disabled="true")
      el-form-item(:label="$t('casesTable.inquisitor')" prop='inquisitorValue')
        el-drag-select(v-model='inquisitorValue' style='width:400px;' multiple='' placeholder='请选择')
          el-option(v-for='item in inquisitors' :key='item.value' :label='item.label' :value='item.value')
      el-form-item(:label="$t('casesTable.caseDescription')")
        el-input(v-model='newCase.description' :autosize='{ minRows: 4, maxRows: 8}' type='textarea' placeholder='请输入基本案情')
    .dialog-footer(slot='footer')
      el-button(@click="canceld()")
        | {{ $t('casesTable.cancel') }}
      el-button(type='primary' @click="dialogStatus==='create'?createCase():updateCase()")
        | {{ $t('casesTable.confirm') }}
</template>

<script>
import ElDragSelect from '@/components/DragSelect' // base on element-ui
import { createCase } from '@/api/cases'

const moment = require('moment')

const caseTypeOptions = [
  { key: 'EC', display_name: '电子商务' },
  { key: 'SA', display_name: '规范促销' },
  { key: 'ES', display_name: '网络交易' },
  { key: 'FS', display_name: '食品安全' }
]
const caseTypeKeyValue = caseTypeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})

export default {
  name: 'AddEvidenceDlg',
  components: { ElDragSelect },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    },
    typeFilter(type) {
      return caseTypeKeyValue[type]
    },
    timeFilter(t) {
      return moment(t).format('YYYY-MM-DD HH:MM:SS')
    }
  },
  props: {
    isShowDlg: {
      type: Boolean,
      default: false
    },
    // newCase: {
    //   type: Object,
    //   default: null
    // },
    dialogStatus: {
      type: String,
      default: 'create'
    }
  },
  data() {
    return {
      newCase: {
        description: '',
        createTime: moment().format('YYYY-MM-DD HH:MM:SS'),
        caseName: '',
        caseNo: moment().format('YYYYMMDDHHMMSS'),
        caseType: 'EC',
        status: 'published'
      },
      textMap: {
        update: '编辑案件',
        create: '新建案件'
      },
      inquisitorValue: ['李寻欢', '叶开', '叮当', '傅红雪'],
      inquisitors: [
        { value: '李寻欢', label: '李寻欢' },
        { value: '叶开', label: '叶开' },
        { value: '叮当', label: '叮当' },
        { value: '傅红雪', label: '傅红雪' }
      ],
      hasAddCase: false,
      caseTypeOptions,
      // temp: {
      //   description: '',
      //   createTime: moment().format('YYYY-MM-DD HH:MM:SS'),
      //   caseName: '',
      //   caseNo: moment().format('YYYYMMDDHHMMSS'),
      //   caseType: '电子商务',
      //   status: 'published'
      // },
      showDlg: this.isShowDlg,
      rules: {
        caseName: [{ required: true, message: '请输入案件名', trigger: 'blur' }],
        caseNo: [{ required: true, message: '请输入案件编号', trigger: 'blur' }],
        caseType: [{ type: 'string', required: true, message: '请选择案件类型', trigger: 'change' }],
        createTime: [{ type: 'string', required: true, message: 'timestamp is required', trigger: 'change' }]
      }
    }
  },
  watch: {
    isShowDlg(val) {
      this.showDlg = val
    },
    showDlg(val) {
      this.$emit('on-result-change', val)
    }
  },
  methods: {
    canceld() {
      this.$emit('on-add-case', 'canceld')
    },
    createCase() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.newCase['inquisitor'] = this.inquisitorValue
          createCase(this.newCase).then(() => {
            this.$emit('on-add-case')
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
            this.$nextTick(() => {
              this.$refs['dataForm'].clearValidate()
            })
          })
        }
      })
    }
  }
}
</script>
